<template>
   <div>
    <div class="navbar-div">
        <van-nav-bar
            title="商品详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
    </div>
    <div class="topimgage-div">
        <img :src="goodsInfo.IMAGE1" width="100%" alt="">
    </div>
    <div class="goods-name">{{goodsInfo.NAME}}</div>
    <div class="goods-price">价格：{{goodsInfo.PRESENT_PRICE | moneyFilter}}</div>
    <!-- tab -->
    <div>
        <!-- sticky 吸顶效果 -->
        <van-tabs swipeable sticky>
            <van-tab title="商品详情">
                <div class="detail" v-html="goodsInfo.DETAIL"></div>
            </van-tab>
            <van-tab title="评价">正在制作中</van-tab>
        </van-tabs>
    </div>
    <!-- bottom -->
    <div class="goods-bottom">

    <div>
            <van-button size="large" type="primary" @click="addGoodsToCart">加入购物车</van-button>
    </div>
    <div>
            <van-button size="large" type="danger">直接购买</van-button>
    </div>

</div>
</div>
</template>

<script>
    import axios from 'axios';
   import url from '@/serviceAPI.config.js';
    import { Toast } from 'vant';
import {toMoney} from '@/filter/moneyFilter';
   
    export default {
       data() {
           return {
               goodsId: '0032862950ca44d397e58a6fb10a3e38',
               goodsInfo:{}//商品详细数据
           }
       },
       created () {
           this.getInfo();
       },
       filters: {
         moneyFilter(money){
             return toMoney(money)
         }  
       },
       methods: {
           getInfo(){
               axios({
                   url: url.getDetailGoodsInfo,
                   method:'post',
                   data:{
                       goodsId:this.goodsId
                   }
               }).then(response=>{
                   console.log(response);
                   if(response.data.code == 200 && response.data.message){
                       this.goodsInfo = response.data.message;
                   }else{
                       Toast('服务器错误，数据取得失败')
                   }
                   console.log( this.goodsInfo );
               }).catch(error=>{
                   console.log(error)
               })
           },
           addGoodsToCart(){
               let cartInfo = localStorage.cartInfo?JSON.parse(localStorage.cartInfo):[];
               //判断购物车内是否已经有这个商品
               //如果没有返回undeifind,如果有返回第一个查找到的数据
               let isHaveGoods = cartInfo.find(cart=> cart.goodsId == this.goodsId);
                console.log(isHaveGoods);
                if(!isHaveGoods){
                    let newGoodsInfo ={
                        goodsId: this.goodsInfo.ID,
                        Name:this.goodsInfo.NAME,
                        price:this.goodsInfo.PRESENT_PRICE,
                        image: this.goodsInfo.IMAGE1,
                        count:1
                    }
                    cartInfo.push(newGoodsInfo) //添加到购物车
                    localStorage.cartInfo = JSON.stringify(cartInfo) //操作本地数据
                    Toast.success('添加成功')
                }else{
                    Toast.success('已有此商品')
                }
                this.$router.push({
                    name:'Cart'
                })//进行跳转
           
           },
           onClickLeft(){
               this.$router.go(-1)
           }
       }
   }
</script>

<style scoped>
.detail{
    font-size: 0;
}
.goods-bottom{
    position: fixed;
    bottom:0px;
    left:0px;
    background-color: #FFF;
    width:100%;

    display: flex;
    flex-direction: row;
    flex-flow: nowrap;
}
.goods-bottom > div{
    flex:1;
    padding:5px;
}
</style>